<script setup lang="ts">

import {TypeUtils} from "/@/utils/TypeUtils.ts";
import {useAttrs} from "vue";

const attrs = useAttrs()
const props = defineProps({
  modelValue:{

  },
  showType: {
    default: 'select',
  },
  showTag: {
  },
  showLabel: {
    default: false
  }
})
const emits= defineEmits(['update:modelValue'])
const selected = ref(0)
const handInputChange=()=> {
  if (props.showTag != undefined || props.showTag == true) {
    return
  }
  emits('update:modelValue',selected.value)
}
const init = ()=> {
  if (TypeUtils.isNumber(props.modelValue)) {
    selected.value = parseInt(props.modelValue)
  }
  if (!props.modelValue) {
    emits('update:modelValue',selected.value)
  }
}
watch(()=>props.modelValue,()=> {
  init()
},{ immediate: true })


const options = ref([
  {
    label: '是',
    value:  0
  },
  {
    label: '否',
    value: 1
  }
])
const prop = ref({
  emitPath: false,
  checkStrictly: true
})
</script>

<template>
  <template v-if="showTag != undefined && showTag != false">
    <el-tag v-for="item in options.filter(value => value.value == modelValue)" :type="item.type || 'primary'">{{item.label}}</el-tag>
  </template>
  <el-switch v-bind="attrs" v-else-if="showType == 'switch'"  v-model="selected" :active-value="options[0].value"
             :active-text="showLabel == false? '':options[0].label"
             :inactive-value="options[1].value"
             :inactive-text="showLabel == false? '':options[1].label"
             @change="handInputChange">
  </el-switch>
  <el-radio-group v-bind="attrs" v-else-if="showType == 'radio'"  v-model="selected" @change="handInputChange">
    <el-radio v-for="item in options" :value="item.value" size="large">{{item.label}}</el-radio>
  </el-radio-group>
  <ElCascader style="width: 100%;"  v-bind="attrs" v-else v-model="selected" @change="handInputChange" :options="options" :prop="prop"/>

</template>

<style scoped lang="scss">

</style>
